<template>
  <div class="love-container scroll-container">
    <UserBatch
      page-name="LoveView"
      v-show="showSelect"
      @close-select="closeSelect"
    />
    <Tab active="song" v-show="!showSelect">
      <template #content>
        <el-tab-pane :label="`歌曲`" name="song">
          <UserMusicTable page-name="LoveView" @open-select="openSelect" />
        </el-tab-pane>
        <el-tab-pane :label="`视频`" name="video">
          <NoResult v-show="loveVideo.length == 0" text="暂无收藏视频" />
          <ArtistMv
            :mvs="loveVideo"
            transitionName="list"
            :showDelete="true"
            :showPagination="true"
            v-show="loveVideo.length > 0"
          />
        </el-tab-pane>
        <el-tab-pane :label="`歌单`" name="playlist">
          <NoResult v-show="lovePlaylist.length == 0" text="暂无收藏歌单" />
          <ArtistPlaylist
            :playlists="lovePlaylist"
            transitionName="list"
            :showDelete="true"
            :showPagination="true"
            v-show="lovePlaylist.length > 0"
          />
        </el-tab-pane>
        <el-tab-pane :label="`电台`" name="radio">
          <NoResult v-show="loveRadio.length == 0" text="暂无收藏电台" />
          <ArtistPlaylist
            :playlists="loveRadio"
            type="radio"
            transitionName="list"
            :show-pagination="true"
            :showDelete="true"
            v-show="loveRadio.length > 0"
          />
        </el-tab-pane>
        <el-tab-pane :label="`歌手`" name="singer">
          <NoResult v-show="loveSinger.length == 0" text="暂无收藏歌手" />
          <Singer
            :singer-list="loveSinger"
            transitionName="list"
            :showDelete="true"
            v-show="loveSinger.length > 0"
          />
        </el-tab-pane>
      </template>
    </Tab>
  </div>
</template>

<script lang="ts" setup>
import { ref, inject, Ref } from 'vue'
import { storeToRefs } from 'pinia'
import { getMusicUrls, getRequest } from '@/utils'
import useUserStore from '@/store/user'
import UserBatch from '@components/batch/user-batch/index.vue'
import UserMusicTable from '@components/table/user-music-table/index.vue'
import Tab from '@components/tab/index.vue'
import { NoResult } from '@/components/result'
import { ArtistMv, ArtistPlaylist, Singer } from '@/components/datalist'
// 配置主题
const fontGray = inject('fontGray')

// 获取用户数据
const user = useUserStore()
const { loveSongs, loveVideo, loveSinger, lovePlaylist, loveRadio } =
  storeToRefs(user)

// 第一次加载的动画
const first = inject('firstLoading') as Ref<boolean>
// 是否加载选择框进入批量操作模式
const showSelect = ref<boolean>(false)

// 打开批量操作
const openSelect = (open: boolean) => {
  showSelect.value = open
}
// 关闭批量操作
const closeSelect = (close: boolean) => {
  showSelect.value = close
}

getRequest(async () => {
  const ids = loveSongs.value.map((item) => item.id).join(',')
  getMusicUrls(ids, loveSongs.value)
  // 关闭动画
  first.value = false
}, first)
</script>

<style lang="less" scoped>
@font-color-gray: v-bind(fontGray);

.love-container {
  .tab {
    &:deep(.el-tabs__item) {
      font-size: 14px;
      letter-spacing: 1px;
    }
    &:deep(.el-tabs__active-bar) {
      left: 5.1px;
      width: 20px !important;
      height: 3px;
      border-radius: 1.5px;
    }
  }

  .singer-container {
    &:deep(.singer-list) {
      width: 80vw;
    }
    padding-bottom: 15px;
    &:deep(.singer .el-image) {
      width: 187.5px;
    }
    &:deep(.singer span) {
      width: 187.5px;
    }
  }

  .mv {
    &:deep(.mv-simi) {
      width: 80vw;
    }
    &:deep(.mv-recommend) {
      width: 232px;
    }
  }

  .playlist {
    @common: 186.5px;
    &:deep(.content) {
      width: 80vw;
    }
    &:deep(.content .list .mask) {
      width: @common;
      height: @common;
    }
    &:deep(.content .list .playcount) {
      top: 155px;
    }
    &:deep(.content .list .el-image) {
      width: @common;
      height: @common;
    }
    &:deep(.content .list .name) {
      width: @common;
    }
  }
}
</style>
